<template>
  <div class="goodsSearch">
    <div class="header">
      <form action="/">
        <van-search class="search" v-model.lazy="value" show-action placeholder="请输入搜索关键词" @update:model-value="onSearch" @cancel="onCancel" @blur="loseBlur" @clear="onClear" autocomplete='off'/>
      </form>
    </div>
    <!-- 搜索内容 -->
    <div v-show="isShow" class="searchContext">
      <div class="searchItem" v-for="(real,index) in searchStore.realSearchList" :key="index" @click="getSearchDetail(real,index)" >
        <div class="context">{{real}}</div>
        <div class="rightArrow">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <!-- 搜索展示 -->
    <div v-show="!isShow" class="searchShow">
      <div class="searchRecord">
        <!-- 历史记录 -->
        <div class="record" v-show="history">
          <div>历史记录</div>
          <van-icon class="searchDelete" name="delete-o" @click="deleteHistory"/>
        </div>
        <div class="recordTag">
          <div class="tagItem" v-for="(history,index) in historyKeyword" :key="index">
            <van-tag @click="toSearchDetail(history)" v-show="history" plain type="primary">{{history}}</van-tag>
          </div>
        </div>
      </div>
      <!-- 热门搜索 -->
      <div class="hotSearch">
        <div class="hot">热门搜索</div>
        <div class="searchTag">
          <div class="tagItem" v-for="(searchHot,index) in searchStore.searchHotList" :key="index">
            <van-tag :class="{'active':currentIndex===index}" plain type="primary" @click="changeIndexToDetail(index,searchHot.keyword)">{{searchHot.keyword}}</van-tag>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Search'
};
</script>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useSearchStore } from '../../store/modules/search'
import { useRouter } from 'vue-router';
const router=useRouter()
const value = ref<string>('');
const isShow = ref<boolean>(false)
const searchStore:any = useSearchStore()
const currentIndex = ref<number>(1)
const timeId = ref()
const realKeyword = ref<any>([])
const historyKeyword = ref<any>()
const history = ref<boolean>(false)
const isShowReal=ref<boolean>(true)
// 收集input 输入内容
const onSearch = (keyword: any) => {
  if (keyword.length > 0) {
    timeId.value=setTimeout(() => {
      searchStore.getRealSearch(`keywordPrefix=${keyword}`)
    }, 1000)
    isShow.value = true
    
  } else {
    isShow.value = false
  }
  
};
// 点击取消
const onCancel = () => { 
  clearTimeout(timeId.value)
  router.back()
};
onMounted(() => {
  searchStore.getSearchHotKeyword()
  if (localStorage.getItem('realKeyword')) {
    const keyword:any = localStorage.getItem('realKeyword')
    historyKeyword.value = keyword?.split(',')
    history.value=true
  }
  
})
// 获取下标，改变tag颜色
const changeIndexToDetail=(index:number,keyword:string)=>{
  currentIndex.value = index
  searchStore.getSearchInfo(keyword)
  router.push({
    name:'SearchDetail',
    path:'/searchDetail',
    query: {
      keywordPrefix:keyword
    }
  })
}
//点击实时搜索，获取搜索详情
const getSearchDetail=(real:string,index:number) => {
  // searchStore.getSearchInfo(real)
  const keyword = searchStore.realSearchList.filter((item: string) => item === real)

  if (!localStorage.getItem('realKeyword')?.includes(real)) {
    realKeyword.value.push(keyword.concat(localStorage.getItem('realKeyword')))
    
  } else {
    realKeyword.value.push(localStorage.getItem('realKeyword'))
  }
  localStorage.setItem('realKeyword',realKeyword.value)
  router.push({
    name:'SearchDetail',
    path:'/searchDetail',
    query: {
      keywordPrefix:real
    }
  })
}
// 失去焦点
const loseBlur = () => {
  clearTimeout(timeId.value)
}
//点击 叉号 
const onClear = () => {
  clearTimeout(timeId.value)
  
}
//点击 删除 历史记录
const deleteHistory = () => {
  history.value = false
  historyKeyword.value = []
  localStorage.removeItem('realKeyword')
}
// 点击历史记录tag 
const toSearchDetail=(history:string) => {
  searchStore.getSearchInfo(history)
  router.push({
    name:'SearchDetail',
    path:'/searchDetail',
    query: {
      keywordPrefix:history
    }
  })
}

</script>

<style lang="less" scoped>
.goodsSearch {
  height: 100vh;
  background-color: #eee;
  .searchContext{
    
    .searchItem{
      background-color: #fff;
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      height: 52px;
      align-items: center;
      border-bottom: 1px solid #E3E3E3;
      
      .context{
        font-size: 16px;
      }
      .rightArrow{
        font-size: 18px;
        color: #707070;
      }
    }
  }
  .searchShow {
    .searchRecord {
      margin-bottom: 10px;
      background-color: #fff;
      padding: 0 10px;
      .record {
        height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        color: #999999;
        .searchDelete{
          font-size: 20px;
        }
      }
      .recordTag {
        display: flex;
        flex-wrap: wrap;
        .tagItem {
          margin: 0 16px 16px 0;
        }
      }
    }
    .hotSearch {
      background-color: #fff;
      padding: 0 10px;
      .hot {
        height: 45px;
        font-size: 14px;
        line-height: 45px;
        color: #999999;
      }
      .searchTag {
        display: flex;
        flex-wrap: wrap;
        .tagItem {
          margin: 0 16px 16px 0;
          .active{
            color: red;
          }
        }
      }
    }
  }
}
</style>
